<template>
    <div class="container">
        <div class="" style="width: 100%;height:80px;border-bottom: solid grey;margin-bottom:10px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="top bg-purple">
                        <h3 style="text-align: center;">宠物数量</h3><br>
                        <div>
                            <h3 style="text-align: center;">{{petCount}}</h3>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="top bg-purple">
                        <div class="grid-content bg-purple">
                            <h3 style="text-align: center;">用户数量</h3><br>
                            <div>
                                <h3 style="text-align: center;">{{userCount}}</h3>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="top bg-purple">
                        <div class="grid-content bg-purple">
                            <h3 style="text-align: center;">订单数量</h3><br>
                            <div>
                                <h3 style="text-align: center;">{{orderCount}}</h3>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="top bg-purple">
                        <div class="grid-content bg-purple">
                            <h3 style="text-align: center;">领养数量</h3><br>
                            <div>
                                <h3 style="text-align: center;">{{adoptCount}}</h3>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-row :gutter="20" style="margin-top: 50px">
            <el-col :span="8">
                <div class="main bg-purple" id="left">

                </div>
            </el-col>
            <el-col :span="8">
                <div class="main bg-purple center" id="center">

                </div>
            </el-col>
            <el-col :span="8">
                <div class="main bg-purple right" id="right">

                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    name:'Home',
    data() {
        return {
            petCount: 0,
            userCount: 0,
            orderCount: 0,
            adoptCount: 0,
            myChart1: null,
            myChart2: null,
            myChart3: null,
            chart1Data: {
                petNameList: [],
                orderCountList: []
            },
            chart2Data: [],
            chart3Data: {
                months: [],
                counts: []
            },
        }
    },
    mounted() {
        this.getCount('pet/getDataCount', 'petCount')
        this.getCount('user/getDataCount', 'userCount')
        this.getCount('order/getDataCount', 'orderCount')
        this.getCount('adopt/getDataCount', 'adoptCount')
        // 基于准备好的dom，初始化echarts实例
        this.myChart1 = echarts.init(document.getElementById('left'))
        this.myChart2 = echarts.init(document.getElementById('center'))
        this.myChart3 = echarts.init(document.getElementById('right'))
        this.getChart1Data()
        this.getChart2Data()
        this.getChart3Data()
        // this.chart1DrawLine()
        // this.chart2DrawLine()
        // this.chart3DrawLine()
    },
    methods: {
        getCount(url, countName){
            this.$axios.get(url)
            .then((result) => {
                // console.log(result);
                this[countName] = result.data
            }).catch((err) => {
                console.error(err)
            });
        },
        getChart1Data(){
            this.$axios.get("order/selectGroupByPetType")
            .then((result) => {
                // console.log(result)
                result.data.forEach(item => {
                    this.chart1Data.petNameList.push(item.pet_type)
                    this.chart1Data.orderCountList.push(item.counts)
                });
                this.chart1DrawLine()
            }).catch((err) => {
                console.error(err)
            });
        },
        getChart2Data(){
            this.$axios.get("adopt/selectGroupByPetType")
            .then((result) => {
                // console.log(result)
                this.chart2Data = result.data
                this.chart2DrawLine()
            }).catch((err) => {
                console.error(err)
            });
        },
        getChart3Data(){
            this.$axios.get("essay/selectGroupByMonth")
            .then((result) => {
                // console.log(result.data)
                const Months = ["一月", "二月", "三月", "四月", "五月", "六月","七月", "八月", "九月", "十月", "十一月", "十二月"]
                result.data.forEach(item => {
                    let index = Number(item.months) - 1
                    this.chart3Data.months.push(Months[index])
                    this.chart3Data.counts.push(item.count)
                })
                // console.log(this.chart3Data.months)
                this.chart3DrawLine()
            }).catch((err) => {
                console.error(err)
            });
        },
        chart1DrawLine() {
            // 绘制图表
            this.myChart1.setOption({
                title: {
                    text: '宠物粮订单分析',
                    left: 'center',
                    textStyle: {
                        fontSize: 18
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                xAxis: {
                    // data: ['猫粮', "狗粮", "猪粮", "兔粮"]
                    data: this.chart1Data.petNameList
                },
                yAxis: {

                },
                series: [{
                    name: '订单数量',
                    type: 'bar',
                    // data: [10, 20, 36, 10],
                    data: this.chart1Data.orderCountList,
                    itemStyle: {
                        color: 'skyblue'
                    }
                }],
                toolbox: {
                    right: 10,
                    feature: {
                        saveAsImage: {},
                        magicType: {
                            type: ['line', 'bar']
                        }
                    }
                },
            });
        },
        chart2DrawLine(){
            this.myChart2.setOption({
                title: {
                    text: '各类宠物领养占比',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        // data: [
                        //     { value: 100, name: '宠物猫' },
                        //     { value: 200, name: '宠物狗' },
                        //     { value: 150, name: '宠物兔' },
                        //     { value: 100, name: '宠物猪' },
                        // ],
                        data: this.chart2Data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        },
        chart3DrawLine(){
            this.myChart3.setOption({
                title: {
                    text: '近半年文章发表数量',
                    left: 'center',
                    textStyle: {
                        fontSize: 20
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                xAxis: {
                    // data: ["一月", "二月", "三月", "四月", "五月", "六月"]
                    data: this.chart3Data.months
                },
                yAxis: {

                },
                series: [{
                    name: '文章数量',
                    type: 'bar',
                    // data: [5, 20, 36, 10, 20, 30],
                    data: this.chart3Data.counts,
                    itemStyle: {
                        color: 'skyblue'
                    }
                }],
                toolbox: {
                    right: 0,
                    feature: {
                        saveAsImage: {},
                        magicType: {
                            type: ['line', 'bar']
                        }
                    }
                },
            });
        }
    }
}
</script>


    
</script>
<style>
.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}


.bg-purple {
    background-color: rgb(244, 253, 255);
}

.top {
    border-radius: 4px;
    min-height: 70px;
}

.main {
    border-radius: 4px;
    min-height: 450px;
}

.row-bg {
    padding: 10px 0;

}
</style>